<template>
  <view class="register_page">
    <view class="logo">
      <!-- <span style="color:black;font-size: 1.3rem;">城乡房屋安全</span> -->
      <image :src="logo" alt="城乡房屋安全" mode="aspectFill"></image>
    </view>
    <view class="login_method">
      <view class="title" :class="{ active: type == 1000 }" @click="type = 1000"
        >账号登录</view
      >
      <view class="title" :class="{ active: type == 2000 }" @click="type = 2000"
        >验证码登录</view
      >
    </view>
    <view
      class="input_box triangle"
      :class="[type == 1000 ? 'left_triangle' : 'right_triangle']"
    >
      <input
        v-model="phone"
        @input="onInput"
        placeholder="请输入您的手机号"
        placeholder-class="grey"
      />
    </view>
    <view class="input_box" v-if="type == 2000">
      <input
        type="number"
        v-model="code"
        placeholder="请输入您的手机验证码"
        placeholder-class="grey"
        @input="onInput"
        maxlength="6"
        @confirm="onSubmit"
      />
      <button class="active" @click="onSetCode">{{ codeText }}</button>
    </view>
    <view class="input_box" v-if="type == 1000">
      <input
        class="input_item"
        v-model="password"
        @input="onInput"
        :password="!isSee"
        placeholder="请输入密码"
        placeholder-class="grey"
        @confirm="onSubmit"
      />
      <image
        v-if="isSee"
        src="../../static/icon/ic_logon_display.png"
        mode="aspectFit"
        @click="isSee = false"
      >
      </image>
      <image
        v-else-if="!isSee"
        src="../../static/icon/ic_logon_hide.png"
        mode="aspectFit"
        @click="isSee = true"
      >
      </image>
    </view>
    <view class="protocol_box">
      <view
        class="select"
        :class="{ active: agree }"
        @click="agree = !agree"
      ></view>
      我已同意
      <text @click="onPageJump('/pages/user/protocol')">《用户协议》</text>
      和
      <text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
    </view>
    <view class="btn_box">
      <button @click="onSubmit" class="active">登录</button>
      <!-- <button v-else>登录</button> -->
    </view>
    <view class="password_register">
      <text @click="onPageJump('/pages/user/register')">注册账号</text>
      <text v-if="type == 1000" @click="onPageJump('/pages/user/forget')"
        >忘记密码？</text
      >
    </view>
    <!-- #ifdef APP-PLUS -->
    <view
      class="third_party_login_box"
      v-if="isWeixin || (isIos && system >= 13)"
    >
      <view class="third_party_title"><text>第三方登录</text></view>
      <view class="third_party_content">
        <image
          src="../../static/icon/ic_login_weixin.png"
          v-if="isWeixin"
          @click="onWxAppLogin"
          mode="aspectFit"
        ></image>
        <image
          src="../../static/icon/ic_login_ios.png"
          v-if="isIos && system >= 13"
          @click="onAppleLogin"
          mode="aspectFit"
        ></image>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import md5 from "@/plugins/md5";
import { ECALogin, ECAfarmerHouseGetToken } from "@/common/utils/api.js";
var clear;
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      type: 1000,
      isSee: false,
      code: "",
      phone: "",
      password: "",
      //验证码
      codeText: "获取验证码",
      //验证码已发
      readonly: false,
      btnShow: false,
      logo: "https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/9.png",
      agree: false,
      isIos: true,
      isWeixin: true,
      system: 13,
      clearTime: null,
    };
  },
  //第一次加载
  onLoad(e) {
	if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: "登录",
      })
        .then((res) => {})
        .catch((err) => {});
    }
  },
  //页面显示
  onShow() {},
  //方法
  methods: {
    ...mapMutations(["setUserInfo"]),
    onPageJump(url) {
      uni.navigateTo({
        url: url,
      });
    },
    onInput() {
      this.clearTime && clearTimeout(this.clearTime);
      this.clearTime = setTimeout(() => {
        if (this.type == 2000) {
          if (this.phone && this.code) {
            this.btnShow = true;
          } else {
            this.btnShow = false;
          }
        } else {
          if (this.phone && this.password) {
            this.btnShow = true;
          } else {
            this.btnShow = false;
          }
        }
      }, 500);
    },
    //验证码按钮文字状态
    getCodeState() {
      clear && clearInterval(clear);
      const _this = this;
      this.readonly = true;
      this.codeText = "60S";
      var s = 60;
      clear = setInterval(() => {
        s--;
        _this.codeText = s + "S";
        if (s <= 0) {
          clearInterval(clear);
          _this.codeText = "获取验证码";
          _this.readonly = false;
        }
      }, 1000);
    },
    // 发送验证码
    onSetCode() {
      if (this.readonly) {
        return;
      }
      if (!this.phone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      if (!this.$base.phoneRegular.test(this.phone)) {
        uni.showToast({
          title: "手机号格式不正确",
          icon: "none",
        });
        return;
      }
    },
    submitForm: async function (data, data1) {
      let me = this;
      let MD5 = require("../../plugins/md5");
      var code = "idl+=adfi@asdi";
      var pwd = MD5.b64_md5(MD5.b64_md5(data1) + code.toUpperCase());
      var time = Date.now();
      var sign = MD5.b64_md5(encodeURIComponent(data) + pwd + time);
      const res = await ECALogin(data, pwd ,sign,time);
      console.log(res,'dataa');
      if (res) {
        //发起请求获取token
        const getUserData = await ECAfarmerHouseGetToken(res.code);
        if (getUserData) {
          uni.setStorageSync("token", getUserData.access_token);
          uni.setStorageSync("user", getUserData.userInfo);
          uni.setStorageSync("userId", getUserData.userInfo.userId);
          uni.setStorageSync("userData", {
            idnum:'14262519960214',
            mobile:getUserData.userInfo.mobileTel,
            username:getUserData.userInfo.userName
          });
          uni.setStorageSync("userType", "农户");
          uni.navigateTo({
            url: "/",
          });
        }
      } else {
        // this.$message.error('登录失败！')
      }
    },
    onSubmit() {
      if (!this.agree) {
        uni.showToast({
          title: "请先同意《用户协议》和《隐私协议》",
          icon: "none",
        });
        return;
      }
      if (!this.phone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }
      if (this.type == 2000) {
        if (!this.code) {
          uni.showToast({
            title: "请输入验证码",
            icon: "none",
          });
          return;
        }
        httpData.code = this.code;
      } else {
        if (!this.password) {
          uni.showToast({
            title: "请输入密码",
            icon: "none",
          });
          return;
        }
        this.submitForm(this.phone, this.password);
      }
    },
  },
  //页面隐藏
  onHide() {},
  //页面卸载
  onUnload() {},
  //页面下来刷新
  onPullDownRefresh() {},
  //页面上拉触底
  onReachBottom() {},
  //用户点击分享
  onShareAppMessage(e) {
    return this.wxShare();
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";

.register_page {
  padding: calc(var(--status-bar-height) + 30rpx) 50rpx 50rpx 50rpx;
  background-color: #fff;
  min-height: 100vh;
  position: relative;

  .logo {
    text-align: center;
    image {
      margin: 0 auto;
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
    }
  }

  .login_method {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 96rpx;
    padding-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      color: #999999;

      &.active {
        position: relative;
        color: $themeColor;
        display: flex;
        padding-bottom: 28rpx;
      }

      &.active::after {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: absolute;
        content: "";
        width: 128rpx;
        height: 6rpx;
        background-color: $themeColor;
      }
    }
  }

  .triangle {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: -20rpx;
      border-left: 18rpx solid transparent;
      border-right: 18rpx solid transparent;
      border-bottom: 18rpx solid #efeef4;
      transition: all 0.4s;
    }

    &::after {
      content: "";
      position: absolute;
      top: -18rpx;
      border-left: 18rpx solid transparent;
      border-right: 18rpx solid transparent;
      border-bottom: 18rpx solid #f8f9fb;
      transition: all 0.4s;
    }
  }

  .left_triangle {
    &::before {
      left: 140rpx;
    }

    &::after {
      left: 140rpx;
    }
  }

  .right_triangle {
    &::before {
      left: 470rpx;
    }

    &::after {
      left: 470rpx;
    }
  }

  .input_box {
    display: flex;
    align-items: center;
    height: 40rpx;
    background-color: #f8f9fb;
    border-radius: 8rpx;
    border: solid 2rpx #efeef4;
    padding: 30rpx 40rpx;
    margin-top: 20rpx;

    image {
      width: 36rpx;
      height: 24rpx;
    }

    input {
      flex: 1;
      font-size: 28rpx;
      color: #333;
      height: 60rpx;
    }

    .input_item {
      font-size: 28rpx;
      border: 0px;
      flex: 1;
      background-color: #f8f9fb;
      height: 88rpx;
      width: 100%;
      outline: none;
      //margin-left: 32rpx;
    }

    button {
      height: 60rpx;
      background-color: #f8f9fb;
      font-size: 28rpx;
      padding: 0 14rpx;
      color: $themeColor;
      line-height: 60rpx;
      margin-left: 20rpx;
      //margin-right: 40rpx;
    }

    .grey {
      color: #999999;
    }
  }

  .btn_box {
    margin-top: 40rpx;

    button {
      font-size: 32rpx;
      background-color: #e5e5e5;
      color: #fff;
      height: 100rpx;
      line-height: 100rpx;
      border-radius: 8rpx;

      &.active {
        @include theme("btn_bg") color: #fff;
      }
    }
  }

  .password_register {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    //text-align: center;

    text {
      font-size: 28rpx;
      color: #333333;
      //text-decoration: underline;
    }
  }

  .protocol_box {
    margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 28rpx;
    color: #333333;

    .select {
      width: 36rpx;
      height: 36rpx;
      background-image: url("../../static/icon/ic_gender_unselected.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      margin-right: 15rpx;

      &.active {
        background-image: url("../../static/icon/ic_agreed.png");
      }
    }

    > text {
      color: $themeColor;
    }
  }
}

.station {
  height: 230rpx;
}

.third_party_login_box {
  position: fixed;
  bottom: 60rpx;
  width: 100%;
  left: 0;
  padding: 0 30rpx;

  .third_party_title {
    display: flex;
    align-items: center;

    &:before,
    &:after {
      content: "";
      flex: 1;
      height: 2rpx;
      background-color: #f5f5f5;
    }

    text {
      font-size: 24rpx;
      color: #999999;
      flex-shrink: 0;
      padding: 0 20rpx;
    }
  }

  .third_party_content {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 80upx;
      height: 80upx;
      margin: 0 20rpx;
    }
  }
}
</style>
